{extend name="./tpl/default/mobile/public/layout.html" /}
{block name="header"}
<link rel="stylesheet" href="/public/home/mobile/css/guanjian/shouhuodizhi.css">
<link rel="stylesheet" href="/public/plugins/dropload/dropload.css">
{/block}
{block name="head"}
{/block}
{block name="body"}
<ul class="order-tab" style="list-style: none;">
    <li><a href="">全部订单</a></li>
    <li><a href="">待付款</a></li>
    <li><a href="">待发货</a></li>
    <li><a href="">待收货</a></li>
    <li><a href="">待评价</a></li>
</ul>
<ul class="order-list" id="list">


</ul>
<div id="page"></div>
{/block}
{block name="script"}
<script src="/public/plugins/dropload/dropload.min.js"></script>
<script src="/public/plugins/template/template.js"></script>
<script type="text/html" id="list-tpl">
    {{ each data as value index}}
    <li>
        <a href="">
            <div class="order-info">
            <span class="order-sn">
                订单号:{{ value.order_sn}}<span class="iconfont icon-icon004" style="color:#ff0000;"></span>
            </span>
            </div>
        </a>
        <a href="">
            <div class="goods-info">
                <div class="goods-item">
                    <div class="thumb">
                        <img src="{{ value.item_list[0]['goods_thumb']}}">
                    </div>
                    <div class="text" style="word-wrap:break-word;"></div>
                    <div class="price-box">
                        <span class="price">{{ value.delivery_name}}</span>
                        <span class="number"></span>
                    </div>
                </div>
            </div>
        </a>
        <div class="count-info">
            合计RMB ￥{{ value.order_price}}<b></b>
        </div>
        <div class="action">
            <a class="order-btn" target="" href="{:url('/home/Order/orderInfo')}?order_sn={{ value.order_sn}}">查看详情</a>
            {{ if value.pay_status==0}}
            <a class="order-btn" target="" href="{:url('/home/Cart/payOrder')}?order_sn={{ value.order_sn}}">去付款</a>
            {{ else if value.shipping_status==0}}
            <a href="">即将发货</a>
            {{ else if value.shipping_status==1}}
            <a href="">已发货</a>
            {{ else if value.geval_status==0}}
            <a href="{:url('/home/Cart/orderGeval')}?order_sn={{ value.order_sn}}" class="order-btn">去评价</a>
            {{ else if value.geval_status==1}}
            <a href="" class="order-btn">已完成</a>
            {{ /if}}
        </div>
    </li>
    {{ /each}}
</script>
<script>
    var datas = {
        order_genre: 0,
        page: 1
    };
    var drop = $('#page').dropload({  //定义检测的容器
        scrollArea: window,
        loadDownFn: function (me) {		//loadDownFn是检测是否加载下方，其余方向请到文档中查看
            // 拼接HTML
            $.ajax({
                type: 'POST',
                url: '{:url("index")}', data: datas, success: function (data) {
                    datas.page++;			//每次都需要将页码加1
                    if (data.code == 0) {
                        layer.open({
                            content: data.msg
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    var html = template('list-tpl', data);		//此处使用的是上章节介绍的模板引擎
                    $('#list').append(html);		//将生成好的html插入放置列表的容器内
                    if (datas.page >= data.last_page) {		//检测是否加载到最后一页
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    me.resetload();			//这句必须写
                }
            });

        }
    });

    function setOrder(type, obj) {
        datas.page = 0;
        datas.type = type;
        $(obj).addClass('active').siblings().removeClass('active');
        $('#list').empty();
        drop.unlock();
        drop.noData(false);
        drop.resetload();
    }
</script>
{/block}
